<!DOCTYPE html>
<html>
	<head>
		<title>Revel Test Runner</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<link href="{{url `Root`}}/@tests/public/css/bootstrap.min.css" type="text/css" rel="stylesheet"></link>
		<link href="{{url `Root`}}/@tests/public/css/github.css" type="text/css" rel="stylesheet"></link>
		<script src="{{url `Root`}}/@tests/public/js/jquery-1.9.1.min.js" type="text/javascript"></script>
		<script src="{{url `Root`}}/@tests/public/js/bootstrap.min.js" type="text/javascript"></script>
		<script src="{{url `Root`}}/@tests/public/js/highlight.pack.js" type="text/javascript"></script>
		<style>
		header { padding:20px 0; background-color:#ADD8E6 }
		.passed td { background-color: #90EE90 !important; }
		.failed td { background-color: #FFB6C1 !important; }
		.tests td.name, .tests td.result { padding-top: 13px; }
		pre { font-size:10px; white-space: pre; }
		.name { width: 25%; }
		.w100 { width: 100%; }
		</style>
	</head>
	<body>
		<header>
			<div class="container">
				<table class="w100"><tr><td>
					<h1>Test Runner</h1>
					<p class="lead">Run all of your application's tests from here.</p>
				</td><td style="padding-left:150px;" class="text-right">
					<button class="btn btn-lg btn-success" all-tests="">Run All Tests</button>
				</td></tr></table>
			</div>
		</header>

		<div class="container">
			{{range .testSuites}}
				<p class="lead" style="margin-top:20px;">{{.Name}}</p>
				<table class="table table-striped tests" suite="{{.Name}}">
					{{range .Tests}}
						<tr>
							<td class="name">{{.Name}}</td>
							<td class="result">
							</td>
							<td class="text-right"><button test="{{.Name}}" class="btn btn-success">Run</button></td>
						</tr>
					{{end}}
				</table>
			{{end}}
		</div>

	<script>
	var buttons = [];
	var running;

	$("button[test]").click(function() {
		var button = $(this).addClass("disabled").text("Running");
		addToQueue(button);
	});

	$("button[all-tests]").click(function() {
		var button = $(this).addClass("disabled").text("Running");
		$("button[test]").click();
	});

	function addToQueue(button) {
		buttons.push(button);
		if (!running) {
			running = true;
			nextTest();
		}
	}

	function nextTest() {
		if (buttons.length == 0) {
			running = false;
		} else {
			var next = buttons.shift();
			runTest(next);
		}
	}

	function runTest(button) {
		var suite = button.parents("table").attr("suite");
		var test = button.attr("test");
		var row = button.parents("tr");
		var resultCell = row.children(".result");
		$.ajax({
			dataType: "json",
			url: "{{url `Root`}}/@tests/"+suite+"/"+test,
			success: function(result) {
				row.attr("class", result.Passed ? "passed" : "failed");
				if (result.Passed) {
					resultCell.html("");
				} else {
					resultCell.html(result.ErrorHtml);

					$("#result_" + suite + "_" + test + " pre code").each(function(i, block) {
						hljs.highlightBlock(block);
					});
				}
				button.removeClass("disabled").text("Run");
				if (buttons.length == 0) {
					$("button[all-tests]").removeClass("disabled").text("Run All Tests");
				}
				nextTest();
			}
		});
	}
	</script>

	</body>
</html>
